import React from 'react'
import echarts from 'echarts';
import { Statistic, Row, Col, Button } from 'antd';
export default class Echart extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            Time: sessionStorage.getItem('Time'),

        }
    }
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('main1'));
        // 绘制图表
        myChart.setOption({
            title: { text: '今日系统访问量' },
            tooltip: {},
            xAxis: {
                data: ["0~4时", "4~8时", "8~12时", "12~16时", "16~20时", "20~0时"]
            },
            yAxis: {},
            backgroundColor: '#eee',
            formatter: function (options) {
                return `<span color="green">人数:${options.data}</span>`
            },
            series: [{
                name: '访问人数',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        myChart1.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        window.addEventListener('resize', function () {
            myChart.resize()
        })
    }
    render() {
        const { Countdown } = Statistic;
        const T=sessionStorage.getItem('Time')
        const Y = +new Date(Number(T)).getFullYear()
        const M = +new Date(Number(T)).getMonth() + 1
        const D = +new Date(Number(T)).getDate()
        const H = +new Date(Number(T)).getHours()
        const m = +new Date(Number(T)).getMinutes()
        const S = +new Date(Number(T)).getSeconds()
        const year=`${Y}年${M}月${D}日 ${H}:${m}:${S}`
        const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
        console.log(deadline, '??', this.state.Time)
        return (
            <div style={{ width: '100%', backgroundColor: '#FFF', height: '100%', display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: "space-evenly" }}>
                <Row gutter={16}>
                    <Col span={12}>
                        <Statistic title="今日访问量" value={112893} />
                    </Col>
                    <Col span={12}>
                        <Statistic title="总访问量" value={112893} precision={2} />
                        <Button style={{ marginTop: 16 }} type="primary">
                            Recharge
      </Button>
                    </Col>
                    <Col span={12}>
                        <Statistic title="周访问量" value={112893} />
                    </Col>
                    <Col span={12} style={{ marginTop: 0 }}>
                        <Countdown title="登录时间" format={year} />
                    </Col>
                </Row>，
                <div id="main" style={{ width: 600, height: 400 }}></div>
                <div id="main1" style={{ flex:1, height: 400 }}></div>
            </div>
        )
    }
}